<template>
  <div style="height:100vh">
    <navbar :showHeaderIcon="true" />
    <el-breadcrumb
      separator="/"
      style="padding-top: 20px; width: 1200px; margin: 0 auto"
    >
      <el-breadcrumb-item
        :to="{
          path: '/tasklist',
          query: {
            projectId: $route.query.projectId,
            examName: $route.query.examName,
          },
        }"
        >{{ $route.query.examName }}</el-breadcrumb-item
      >
      <el-breadcrumb-item>回评列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tasklistContent">
      <div class="tasklistBox">
        <div class="mytasklist">
          <span class="pytime">评阅时间</span>
          <el-date-picker
            v-model="dataTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <span class="pytime pytime1">打分区间</span>
          <div class="scoreRange">
            <el-input
              v-model="questionDate.lowScore"
              placeholder="最低分"
            ></el-input>
            <span>至</span>
            <el-input
              v-model="questionDate.highScore"
              placeholder="最高分"
            ></el-input>
          </div>
          <el-button
            class="searchBtn"
            type="primary"
            @click="searchQuestionList"
            >搜索</el-button
          >
        </div>
        <el-table
          :data="removelist"
          v-loading="taskloading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(355, 255, 255, 0.8)"
          border
          stripe
          style="width: 100%"
          :height="tabheight"
        >
          <el-table-column prop="questionNumbers" label="试题编号">
          </el-table-column>
          <el-table-column prop="score" label="分数"> </el-table-column>
          <el-table-column prop="reviewedTime" label="打分时间">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <span
                class="startReview"
                @click="reviewState(scope.row, scope.$index)"
                >回评</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="page-bottom">
      <div
        style="
          width: 1200px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div class="sel-box">
          <p>共 {{ total }} 条数据</p>
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="questionDate.pageNum"
          :limit.sync="questionDate.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { assignmentReviewlist } from "@/api/mark/mark";
import { Navbar } from "@/layout/components";
export default {
  name: "Reviewlist",
  data() {
    return {
      type: 1,
      total: 0,
      removelist: [],
      dataTime: "",
      taskcontent: {},
      questionDate: {
        pageNum: 1,
        pageSize: 15,
        hightScore: "",
        lowScore: "",
        startTime: "",
        endTime: "",
        teacherId: "",
        examId: "",
        assignmentConfigId: "",
      },
      tabheight: 0,
      taskloading: false,
      firstLoad: true,
    };
  },
  created() {
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - 280;
    });
    this.taskcontent = JSON.parse(sessionStorage.getItem("taskContent"));
    this.getReviewlist();
    document.addEventListener("visibilitychange", (e) => {
      if (document.visibilityState === "visible") {
        this.getReviewlist();
      }
    });
  },
  components: {
    Navbar,
  },
  activated() {
    if (!this.firstLoad) {
      if (this.$store.state.app.isRefresh) {
        this.taskcontent = JSON.parse(sessionStorage.getItem("taskContent"));
        this.questionDate.pageNum = 1;
        this.$nextTick(() => {
          this.getReviewlist();
        });
      } else {
        this.getReviewlist();
      }
    }
    this.firstLoad = false;
    this.$store.dispatch("app/setIsRefresh", false);
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },
    //获取回评列表
    getReviewlist(teacherId, examId, assignmentConfigId) {
      this.taskloading = true;
      this.questionDate.teacherId = this.taskcontent.teacherId;
      this.questionDate.examId = this.taskcontent.examId;
      this.questionDate.assignmentConfigId =
        this.taskcontent.assignmentConfigId;
      // console.info('this.questionDate.dataTime',this.questionDate)
      // return false
      assignmentReviewlist(this.questionDate)
        .then((res) => {
          console.info(res);
          if (res.code == 200) {
            this.removelist = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          // 无论成功失败都会执行
          this.taskloading = false;
        });
    },
    searchQuestionList() {
      if (this.dataTime && this.dataTime.length > 0) {
        // alert('ddd')
        this.questionDate.startTime = this.dataTime[0];
        this.questionDate.endTime = this.dataTime[1]+"23:59:59";
      } else {
        //  alert('1111')
        this.questionDate.startTime = undefined;
        this.questionDate.endTime = undefined;
      }
    sessionStorage.setItem('plCs',JSON.stringify(this.questionDate))
      this.getReviewlist();
    },
    getList() {
      this.getReviewlist();
    },
    reviewState(row, index) {
      // return false
      this.$router.push(
        "/reviewmark/index?projectId=" +
          this.$route.query.projectId +
          "&examName=" +
          this.$route.query.examName +
          "&pageNumber=" +
          this.questionDate.pageNum +
          "&index=" +
          index+"&pageSize="+this.questionDate.pageSize
      );
      sessionStorage.setItem("taskcardObject", JSON.stringify(row));
      sessionStorage.setItem("reviewtasklist", JSON.stringify(this.removelist));
      // sessionStorage.setItem('pageNumber',this.questionDate.pageNum)
    },
    destroyed() {
      document.removeEventListener("visibilitychange", (e) => {
        if (document.visibilityState === "visible") {
          this.getReviewlist();
        }
      });
    },
  },
};
</script>

<style scoped>
>>> .el-table >>> .even-row {
  background-color: #fafafb; /* 偶数行颜色 */
}
>>> .el-table >>> .odd-row {
  background-color: #ffffff; /* 奇数行颜色 */
}
.tasklistContent {
  width: 100%;
  height: 100%;
}
.tasklistBox {
  width: 1200px;
  background: #ffffff;
  box-shadow: 0 4px 16px 0 #5572921a;
  padding: 24px;
  position: relative;
  margin: 15px auto;
}
.mytasklist {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 14px;
  color: #333;
  margin: 15px 0;
}
.mytasklist i {
  font-style: normal;
  display: inline-block;
  padding: 0 8px;
  color: #1a48db;
}
>>> .el-table th.el-table__cell > .cell {
  text-align: center;
}
>>> .el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
.buttconbox {
  display: flex;
  align-items: center;
  position: absolute;
  left: 30px;
  bottom: 30px;
}
.buttconbox span,
.buttconbox b {
  display: inline-block;
  width: 124px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  line-height: 34px;
}
.buttconbox span {
  background: #1a48db;
  color: #fff;
}
.buttconbox b {
  font-style: normal;
  background: #f2f6fb;
  border: 1px solid #1a48db;
  color: #1a48db;
  font-weight: normal;
  margin-left: 24px;
}
.spanred,
.spanblue,
.spangreen,
.spangray {
  display: inline-block;
  width: 76px;
  height: 22px;
  border-radius: 6px;
  text-align: center;
  line-height: 22px;
  font-size: 14px;
}
.spanred {
  background: #ec555a0f;
  border: 1px solid #ec555a80;
  color: #ec555a;
}
.spanblue {
  background: #1a48db0f;
  border: 1px solid #1a48db80;
  color: #1a48db;
}
.spangreen {
  background: #288f410f;
  border: 1px solid #288f4180;
  color: #288f41;
}
.spangray {
  background: #5b63710f;
  border: 1px solid #5b637180;
  color: #5b6371;
}
.startReview {
  font-weight: 400;
  font-size: 14px;
  color: #1a48db;
  text-decoration: underline;
  cursor: pointer;
}
.endReview {
  font-weight: 400;
  font-size: 14px;
  color: #5b6371;
}
.scoreRange {
  background-color: #ffffff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: flex;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  align-items: center;
}
.scoreRange >>> .el-input__inner {
  width: 100px;
  border: none;
  text-align: center;
}
.pytime {
  display: inline-block;
  margin-right: 10px;
}
.pytime1 {
  margin-left: 25px;
}
.searchBtn {
  margin-left: 20px;
}
</style>